<template>
  <a-modal v-model:visible="visibleCodeDetailsModal1[key]" title="码值详情" @ok="handleOk" @cancel="handleCancel">
    <table-component></table-component>
  </a-modal>
</template>
<script setup lang="ts">
  import { Ref } from 'vue';
  import tableComponent from '@/pages/component/tableComponent.vue';

  const emit = defineEmits(['CodeDetailsShow']);
  const props = defineProps({
    dataList: {
      type: String,
      default: () => {
        return [];
      },
    },
    visibleCodeDetailsModal: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dialogStatue: {
      type: String,
    },
    isSaved: {
      type: Boolean,
    },
  });
  watch(
    () => props.visibleCodeDetailsModal as [],
    (nvalue: boolean[]) => {
      console.log(nvalue);
      visibleCodeDetailsModal1.value = nvalue;
      // if (nvalue == false) {
      //   return;
      // }
      nvalue.forEach(item => {
        if (item == true) {
          key.value = nvalue.indexOf(item);
          console.log(key.value);
        }
      });
      //   visibleCodeDetailsModal1.value = nvalue;
    },
    { deep: true },
  );
  interface SmallModal {
    codesId: string;
    configsId: number;
    configsMsg: string;
    configsName: string;
  }
  const tableSmallModal: Ref<SmallModal[]> = ref([]);
  let key: Ref<number> = ref(999);

  const visibleCodeDetailsModal1: Ref<boolean[]> = ref([]);
  const handleOk = () => {
    emit('CodeDetailsShow', key.value);
    visibleCodeDetailsModal1.value[key.value] = false;
  };
  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('CodeDetailsShow', 'false');
  };
</script>
<style lang="less" scoped>
  .content {
    display: flex;
    width: 100%;

    /deep/ .ant-table-cell::before {
      position: static;
      display: inline-block;
      margin-right: 28px;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      color: #ff4d4f;
      transform: translateY(0px);
      content: '*';
    }
  }
</style>
